<template>
  <div class="header">
    <div class="head">
      <a href="javascript:;" @click="changeLanguage()">{{$t('global.change_language_modal_title')}}</a>
    </div>

    <Modal
      v-model="changeLanguageModal"
      :title="$t('global.change_language_modal_title')"
      width="300"
      cancel-text=""
      :ok-text="$t('global.close')"
      :class="'change-language-modal'">
      <Row>
        <Col span="12"><span class="item" @click="setLanguage('zh')"><img src="~/assets/images/cn.png"> 简体中文</span></Col>
        <Col span="12"><span class="item" @click="setLanguage('hk')"><img src="~/assets/images/hk.png"> 繁体中文</span></Col>
        <Col span="12"><span class="item" @click="setLanguage('jp')"><img src="~/assets/images/jp.png"> 日本語</span></Col>
        <Col span="12"><span class="item" @click="setLanguage('kr')"><img src="~/assets/images/kr.png"> 대한민국</span></Col>
        <Col span="12"><span class="item" @click="setLanguage('en')"><img src="~/assets/images/us.png"> English (US)</span></Col>
        <Col span="12"><span class="item" @click="setLanguage('ru')"><img src="~/assets/images/ru.png"> Россия</span></Col>
      </Row>

    </Modal>

  </div>
</template>

<script>
  import Cookie from 'js-cookie'
  export default {
    name: "n-header",
    components: {
    },
    props:{
    },
    data() {
      return {
        changeLanguageModal:false,
      }
    },
    async fetch ({app, $store, params}){

    },
    mounted() {

    },
    methods: {
      changeLanguage(){
        this.changeLanguageModal = true
      },
      setLanguage(language){
        this.$store.commit('SET_LANG', language)
        this.$i18n.locale = language;
        Cookie.set("language",language)
        this.changeLanguageModal = false
      }
    },
    destroyed() {
    }
  }
</script>

<style lang="stylus" scoped>

  .header{
    width 100%
    height 80px
    background-color #ddd;

    .head {
      width 1000px;
      margin 0 auto;
      line-height 80px;
    }
  }

  .change-language-modal{

    .ivu-modal-body{

      .item{
        display flex;
        align-items center;
        cursor pointer;
        line-height 24px;
        font-size:14px;

        img{
          width 16px
          height: 16px
          margin-right:6px
        }
      }
      .item:hover{
        color: #7f828b;
      }
    }
  }

</style>
